<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	template="/templates/menu-template.xhtml">

	<ui:define name="title">
		<h:outputText value="#{msg.catalogoReaders}" />
	</ui:define>
	<ui:define name="content">
		<a4j:form id="form">
			<rich:panel>
				<a4j:keepAlive beanName="beanReaders" />
				<f:facet name="header">
					<h:outputText value="#{msg.escogerAccion}" />
				</f:facet>
				<h:panelGrid columns="1">
					<a4j:commandButton ajaxSingle="true" value="#{msg.agregarReader}"
						id="addDevice" action="#{beanReaders.selectBrand}"
						reRender="brandCombo2">
						<rich:componentControl for="mpAgregarReader" attachTo="addDevice"
							operation="show" event="onclick" />
					</a4j:commandButton>
				</h:panelGrid>
				<rich:spacer height="20px" />
				<rich:extendedDataTable value="#{beanReaders.listItems}" var="item"
					id="table" rows="10" reRender="datascroller"
					style="margin-left: auto; margin-right: auto; text-align: center;"
					width="100%">
					<rich:column id="serialNumberColumn" label="#{msg.serialNumber}"
						width="25%">
						<f:facet name="header">
							<h:outputText value="#{msg.serialNumber}" />
						</f:facet>
						<h:outputText value="#{item.serialNumber}" />
					</rich:column>
					<rich:column id="versionColumn" label="#{msg.version}" width="25%">
						<f:facet name="header">
							<h:outputText value="#{msg.version}" />
						</f:facet>
						<h:outputText value="#{item.version}" />
					</rich:column>
					<rich:column id="isActiveColumn" label="#{msg.active}" width="25%">
						<f:facet name="header">
							<h:outputText value="#{msg.active}" />
						</f:facet>
						<h:outputText value="#{item.isActive}" />
					</rich:column>
					<rich:column width="25%" id="acciones" label="#{msg.acciones}">
						<f:facet name="header">
							<h:outputText value="#{msg.acciones}" />
						</f:facet>
						<a4j:commandLink ajaxSingle="true" id="editDevice">
							<h:graphicImage value="/static/images/edit.png" style="border: 0" />
							<f:setPropertyActionListener value="#{item}"
								target="#{beanReaders.currentItem}" />
							<rich:componentControl for="mpEditarReader" attachTo="editDevice"
								operation="show" event="onclick" />
						</a4j:commandLink>
						<rich:toolTip for="editDevice" value="#{msg.editar}" />
						<a4j:commandLink ajaxSingle="true" id="deleteDevice">
							<h:graphicImage value="/static/images/delete.png"
								style="border: 0" />
							<f:setPropertyActionListener value="#{item}"
								target="#{beanReaders.currentItem}" />
							<rich:componentControl for="mpBorrarReader"
								attachTo="deleteDevice" operation="show" event="onclick" />
						</a4j:commandLink>
						<rich:toolTip for="deleteDevice" value="#{msg.borrar}" />
					</rich:column>
					<f:facet name="footer">
						<rich:datascroller id="datascroller" renderIfSinglePage="false" />
					</f:facet>
				</rich:extendedDataTable>
				<!-- Inicio Modal Panel Borrar -->
				<rich:modalPanel id="mpBorrarReader" height="110" width="250">
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="#{msg.borrar}"></h:outputText>
						</h:panelGroup>
					</f:facet>
					<p>El dispositivo seleccionado será eliminado permanentemente
						del sistema.</p>
					<a4j:outputPanel ajaxRendered="true">
						<h:panelGrid columns="2" style="margin-left: auto;">
							<h:panelGroup>
								<a4j:commandButton id="continueDeleteReader"
									value="#{msg.continuar}" ajaxSingle="true"
									action="#{beanReaders.deleteReader}"
									oncomplete="#{rich:component('mpBorrarReader')}.hide();"
									reRender="table" />
							</h:panelGroup>
							<h:panelGroup>
								<a4j:commandButton value="#{msg.cancelar}" id="btnCancelReader"
									onclick="#{rich:component('mpBorrarReader')}.hide();return false;" />
							</h:panelGroup>
						</h:panelGrid>
					</a4j:outputPanel>
				</rich:modalPanel>
				<!-- Fin Modal Panel Borrar -->
			</rich:panel>
		</a4j:form>
		<!-- Inicio Modal Panel Agregar -->
		<rich:modalPanel id="mpAgregarReader" autosized="true" width="350">
			<a4j:keepAlive beanName="beanReaders" />
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="#{msg.agregar}" />
				</h:panelGroup>
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/static/images/close.png"
						id="hideNewReaderPanel" />
					<rich:componentControl for="mpAgregarReader"
						attachTo="hideNewReaderPanel" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<a4j:form>
				<a4j:outputPanel ajaxRendered="true">
					<rich:graphValidator value="#{beanReaders}">
						<h:panelGrid columns="3">
							<h:outputText value="#{msg.brand}:" />
							<rich:comboBox value="#{beanReaders.newBrand}" id="brandCombo2"
								valueChangeListener="#{beanReaders.selectionChanged}"
								style="width:200px;" defaultLabel="---Marca---">
								<f:selectItems value="#{beanReaders.brandList}" />
								<a4j:support event="onchange" ajaxSingle="true"
									reRender="modelCombo2" />
							</rich:comboBox>
							<rich:message for="brandCombo2" />
							<h:outputText value="#{msg.model}:" />
							<a4j:outputPanel id="modelPanel" ajaxSingle="true">
								<rich:comboBox value="#{beanReaders.newModel}" id="modelCombo2"
									style="width:200px;" disabled="#{beanReaders.enabled}">
									<f:selectItems value="#{beanReaders.modelList}" />
								</rich:comboBox>
							</a4j:outputPanel>
							<rich:message for="modelCombo2" />
							<h:outputText value="#{msg.serialNumber}:" />
							<h:inputText value="#{beanReaders.newSerialNumber}"
								style="width:150px;" id="newSerialNumber" />
							<rich:message for="newSerialNumber" />
							<h:outputText value="#{msg.version}:" />
							<h:inputText value="#{beanReaders.newVersion}"
								style="width:150px;" id="newVersion" />
							<rich:message for="newVersion" />
							<h:outputText value="#{msg.encryptionKey}:" />
							<h:inputSecret value="#{beanReaders.newEncryptionKey}"
								id="newEncryptionKeyInput" style="width:150px;" />
							<rich:message for="newEncryptionKeyInput" />
							<h:outputText value="#{msg.verifyKey}:" />
							<h:inputSecret value="#{beanReaders.newVerifyKey}"
								id="newVerifyKeyInput" style="width:150px;" />
							<rich:message for="newVerifyKeyInput" />
							<h:outputText value="Mensaje de seguridad:" />
							<h:inputSecret value="#{beanReaders.newMessageSecurity}"
								id="newSecurityMessageInput" style="width:150px;" />
							<rich:message for="newSecurityMessageInput" />
						</h:panelGrid>
					</rich:graphValidator>
					<a4j:commandButton value="#{msg.continuar}" id="acceptNewDevice"
						action="#{beanReaders.createReader}"
						oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpAgregarReader')}.hide();" />
				</a4j:outputPanel>
			</a4j:form>
		</rich:modalPanel>
		<!-- Final Modal Panel Agregar -->
		<!-- Inicio Modal Panel Editar -->
		<rich:modalPanel id="mpEditarReader" autosized="true" width="250">
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="#{msg.editar}" />
				</h:panelGroup>
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/static/images/close.png"
						id="hideReaderPanel" />
					<rich:componentControl for="mpEditarReader"
						attachTo="hideReaderPanel" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<a4j:form>
				<a4j:outputPanel ajaxRendered="true">
					<h:panelGrid columns="2"
						style="margin-left: auto; margin-right: auto;">
						<h:outputText value="#{msg.encryptionKey}"
							id="encryptionKeyOutput" />
						<h:inputSecret value="#{beanReaders.encryptionKey}"
							id="encryptionKeyInput" />
						<h:outputText value="#{msg.verifyKey}" id="verifyKeyOutput" />
						<h:inputSecret value="#{beanReaders.verifyKey}"
							id="verifyKeyInput" />
					</h:panelGrid>
					<h:panelGrid columns="2" style="margin-left: auto;">
						<h:panelGrid columns="2" style="margin-left: auto;">
							<a4j:commandButton value="#{msg.aceptar}" ajaxSingle="true"
								id="continueEditReader" action="#{beanReaders.updateReader}"
								oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpEditarReader')}.hide();" />
						</h:panelGrid>
					</h:panelGrid>
				</a4j:outputPanel>
			</a4j:form>
		</rich:modalPanel>
		<!-- Fin Modal Panel Editar -->
	</ui:define>
</ui:composition>